<template>
  <div>
    <div class="head">
      <div class="people-info" @click="goMyCenter">
        <div>
          <img :src="info.img" alt="" />
        </div>
        <div>
          <p>{{ info.userName }}</p>
          <span>{{ info.phone }}</span>
        </div>
        <van-icon class="icon-img" name="arrow" />
      </div>
    </div>

    <div class="top">
      <span>人员列表</span>
      <div @click="getAddress">
        <span class="mr5">筛选</span>
        <van-icon name="filter-o" />
      </div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul class="card-list">
        <li v-for="(item, index) in list" :key="index">
          <div class="card-head">
            <van-icon name="shop-o" />
            {{ item.shopName }}
            <van-popover
              v-model="item.showPopover"
              theme="dark"
              trigger="click"
              :actions="item.actions"
              @select="onSelect"
              class="operate"
              placement="bottom-end"
            >
              <template #reference>
                <van-icon name="ellipsis" />
              </template>
            </van-popover>
          </div>
          <div class="card-content">
            <div class="item-con">
              <label>地市区县：</label>
              <span>{{ item.cityName }}{{ item.countyName }}</span>
            </div>
            <div class="item-con">
              <label>门店地址：</label>
              <span>{{ item.address }}</span>
            </div>
            <div class="item-con">
              <label>门店店长：</label>
              <span>{{ item.shopManager }}</span>
            </div>
            <div class="item-con">
              <label>手机号码：</label>
              <span>{{ item.phone }}</span>
            </div>
            <div class="item-con">
              <label>分销人数：</label>
              <span>{{ item.memnum }}</span>
            </div>
          </div>
          <div class="card-bottom" v-show="item.status===0?true:false">
            <span @click="handlerQr(item.id)">生成二维码</span>
            <span @click="handlerPopularize(item.id)">查看门店推广</span>
            <span @click="shopUserList(item.id)">查看营业人员</span>
          </div>
        </li>
      </ul>
    </van-list>
    <div class="btn-add" @click="add">
      <img src="@/assets/images/btn_add.png" alt="" />
    </div>
  </div>
</template>
<script>
import { getShopList, homeHeaderData, getOpen, getUserInfo } from './service/service.js'
export default {
  name: 'ChannelHome',
  data () {
    return {
      showPopover: false,
      actIndex: 0,
      info: {
        userName: '',
        phone: '',
        img: require('@/assets/images/pic.png')
      },
      actions: [
        { text: '修改', icon: require('@/assets/images/icon_unlock.png') },
        { text: '删除', icon: require('@/assets/images/icon_deit.png') }
      ],
      list: [],
      loading: false,
      finished: false,
      cityId: '',
      countyId: '',
      shopName: '',
      pageNo: 1,
      pageSize: 10,
      totalCount: ''
    }
  },
  created () {
    getUserInfo()
      .then((res) => {
        const data = res.data
        if (data.ret !== 0) {
          this.$toast(data.msg)
          return false
        }
        this.loginInfo = data.data // loginSrc 0:客户端发起 1：其它登录
        this.$store.commit('channel/getLoginInfo', this.loginInfo)
      })
      .catch((err) => {
        console.log(err)
      })
    homeHeaderData()
      .then((res) => {
        const data = res.data
        if (data.ret !== 0) {
          this.$toast(data.msg)
          return false
        }
        this.info.userName = data.data.userName
        this.info.phone = data.data.phone
      })
      .catch((err) => {
        console.log(err)
      })

    this.cityId = this.$route.query.cityId || 0
    this.countyId = this.$route.query.countyId || 0
    this.shopName = this.$route.query.shopName || ''
  },
  methods: {
    goMyCenter () {
      this.$router.push({ path: '/channel/myCenter', query: { userName: this.info.userName, phone: this.info.phone } })
    },
    getlist () {
      const params = {
        cityId: this.cityId,
        countyId: this.countyId,
        shopName: this.shopName,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      getShopList(params)
        .then((res) => {
          const data = res.data
          if (data.ret !== 0) {
            this.$toast(data.msg)
            return false
          }

          this.totalCount = Math.ceil(data.data.total / this.pageSize)
          const datas = data.data.rows.map((item) => {
            item.showPopover = false
            item.actions = [
              {
                text: '修改',
                icon: require('@/assets/images/icon_deit.png'),
                id: item.id,
                phone: item.phone,
                cityId: item.cityId,
                cityName: item.cityName,
                countyId: item.countyId,
                countyName: item.countyName,
                shopName: item.shopName,
                address: item.address,
                shopManage: item.shopManager
              },
              {
                text: '开启',
                icon: require('@/assets/images/icon_unlock.png'),
                id: item.id,
                phone: item.phone,
                status: item.status
              }
            ]

            item.actions[1].text = item.status === 0 ? '关闭' : '开启'

            return item
          })
          this.list = [...this.list, ...datas]

          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (this.pageNo >= this.totalCount) {
            this.finished = true
            return
          }
          this.pageNo++
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onLoad () {
      this.getlist()
    },
    getAddress () {
      this.$router.push({
        path: '/channel/address',
        query: { regions: '1', shop: '5' }
      })
    },
    // 生成二维码
    handlerQr (id) {
      this.$router.push({
        path: '/channel/markeingQR',
        query: { userId: id }
      })
    },
    // 门店推广
    handlerPopularize (id) {
      this.$router.push({
        path: '/channel/storeChart',
        query: { userId: id }
      })
    },
    // 营业人员
    shopUserList (id) {
      this.$router.push({
        path: '/channel/shopAssistant',
        query: { userId: id }
      })
    },
    onSelect (action, index, item) {
      console.log(action, index)
      // return
      if (action.text !== '修改') {
        const status = action.status === 0 ? '-1' : 0
        getOpen({ ids: action.id, status: status })
          .then((res) => {
            const data = res.data
            if (data.ret !== 0) {
              this.$toast(data.msg)
              return false
            }
            this.$toast(data.msg)
            this.list.forEach((element, index) => {
              if (element.id === action.id) {
                // element.status = status
                console.log(this.list[index].actions)
                const text = status === 0 ? '关闭' : '开启'
                this.$set(this.list[index], 'status', status)
                this.$set(this.list[index].actions[1], 'status', status)
                this.$set(this.list[index].actions[1], 'text', text)
              }
            })
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        this.$router.push({
          name: 'c-addstore',
          params: {
            opt: 'edit', // 操作类型，新增 ：‘add，修改：‘edit’
            shopId: action.id, // 门店id,当新增门店传0
            cityId: action.cityId,
            countyId: action.countyId,
            shopName: action.shopName,
            address: action.address,
            shopManage: action.shopManage,
            phone: action.phone,
            cityName: action.cityName,
            countyName: action.countyName
          }

        })
      }
    },
    add () {
      this.$router.push({ name: 'c-addstore', params: { opt: 'add' } })
    }
  }
}
</script>

<style lang="less" scoped>
.head {
  background: url("../../assets/images/img_myCenter.png") no-repeat left
    top/100%;
  padding-top: 26px;
}
.people-info {
  margin: 0 15px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 2px rgba(35, 129, 241, 0.1);
  border-radius: 8px;
  padding: 14px 20px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  > div:first-child {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    margin-right: 15px;
    img {
      width: 100%;
    }
  }
  > div:nth-child(2) {
    p {
      color: #333330;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 2px;
    }
    span {
      font-size: 12px;
      color: #a5b5c9;
    }
  }
  .icon-img {
    position: absolute;
    top: 28px;
    right: 20px;
  }
}
.top {
  padding: 10px 15px 15px;
  display: flex;
  justify-content: space-between;
}
.card-list {
  li {
    margin: 0 15px 15px;
  }
  .card-head {
    height: 40px;
    background: #3380c7;
    color: #fff;
    line-height: 40px;
    border-radius: 4px 4px 0px 0px;
    padding-left: 15px;
    .operate {
      float: right;
      line-height: 40px;
      width: 40px;
      padding: 0 15px;
    }
  }
  .card-content {
    background: #fff;
    padding: 0 15px;
    .item-con {
      line-height: 34px;
      font-size: 14px;
      color: #666;
      display: flex;
      > label {
        width: 80px;
      }
      span {
        flex: 1;
      }
    }
    .data-show {
      margin-top: 8px;
      border-top: 1px solid #dadee3;
      padding: 10px 0;
      display: flex;
      justify-content: space-around;
      div {
        span {
          font-size: 13px;
          color: #999999;
        }
        p {
          font-size: 18px;
          color: #333;
          margin-top: 6px;
          font-weight: 700;
        }
      }
    }
  }

  .card-bottom {
    height: 40px;
    background: #f4f8fe;
    border-radius: 0px 0px 4px 4px;
    line-height: 40px;
    text-align: center;
    color: #2381f1;
    display: flex;
    justify-content: space-evenly;
  }
}
.btn-add {
  position: fixed;
  bottom: 40px;
  right: 10px;
  img {
    width: 60px;
  }
}
</style>
